<template>
  <div class="el-page el-main el-position">
    <div class="titleInfo">
      <div>客户姓名:<span>{{ cookiesObj.clientName }}</span></div>
      <div>客户电话:<span>{{ cookiesObj.phone }}</span></div>
      <div>客户地址:<span>{{ cookiesObj.clientAddress }}</span></div>
    </div>
    <el-divider></el-divider>
    <div class="search-box" id="search-box">
      <div class="search-card">
        <div class="input-box">
          <div class="searchCard">
            <span class="searchText">车牌号：</span>
            <el-input class="shadowInput" v-model="form.carNumber" clearable size="mini"
              placeholder="请输入车牌号码"></el-input>
          </div>
          <div class="searchCard">
            <span class="searchText">司机姓名：</span>
            <el-input class="shadowInput" v-model="form.driverName" clearable size="mini"
              placeholder="请输入司机姓名"></el-input>
          </div>
          <div class="searchCard">
            <span class="searchText">仓号：</span>
            <el-input class="shadowInput" v-model="form.warehouseCode" clearable size="mini"
              placeholder="请输入仓号"></el-input>
          </div>
          <div class="searchCard">
            <span class="searchText">作物类型：</span>
            <el-input class="shadowInput" v-model="form.type" clearable size="mini" placeholder="请输入作物类型"></el-input>
          </div>
          <div class="searchCard">
            <span class="searchText">状态：</span>
            <el-select class="shadowInput" size="mini" clearable v-model="form.status" placeholder="请选择状态">
              <el-option v-for="item in carList" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </div>
        </div>
        <div class="button-box">
          <el-button class="search" @click="getList">搜索</el-button>
          <el-button class="clear" @click="handleReset">清除</el-button>
        </div>
        <svg-icon class="svg-icon arrow" id="arrow" icon-class="rightArrow" @click="toggleDropdown" />
      </div>
      <div class="input-box">

      </div>
    </div>
    <el-divider></el-divider>
    <div class="operate-box">
      <div class="button-box">
        <el-button v-if="Butstatus == '0' && hasIdentifier('OutboundDetails.add')" class="addButton" type="primary"
          icon="el-icon-plus" size="mini" style="margin-right: 10px;" @click="Bd">新增</el-button>
        <el-popconfirm v-if="Butstatus == '0' && hasIdentifier('OutboundDetails.delete')" confirm-button-text='确定'
          cancel-button-text='取消' icon="el-icon-info" icon-color="red" title="确定删除所勾选的数据吗？" @confirm="handleDel">
          <el-button v-if="Butstatus == '0' && hasIdentifier('OutboundDetails.delete')" slot="reference" type="danger"
            plain icon="el-icon-delete" size="mini">删除</el-button>
        </el-popconfirm>
        <el-button type="info" plain icon="el-icon-upload2" size="mini" style="margin-left: 10px;"
          @click="handleSelectAll">全选</el-button>
        <el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport">导出</el-button>

        <el-button v-if="Butstatus == '0' && hasIdentifier('OutboundDetails.order.apply')" type="success" plain
          icon="el-icon-tickets" size="mini" @click="handleApply">补单申请</el-button>
        <el-button v-if="Butstatus == '0' && hasIdentifier('OutboundDetails.order.fill')" type="success" plain
          icon="el-icon-document-checked" size="mini" @click="handleReport">补单填报</el-button>
        <el-button v-if="Butstatus == '0' && hasIdentifier('OutboundDetails.adds')" class="addButton" type="primary"
          icon="el-icon-plus" size="mini" @click="ClearChange">出场过磅</el-button>
      </div>
      <div>
        <el-tooltip class="item" effect="dark" content="刷新" placement="top">
          <el-button class="circleButtom" size="mini" icon="el-icon-refresh" circle @click="getList"></el-button>
        </el-tooltip>
        <el-tooltip class="item" effect="dark" content="显隐列" placement="top">
          <el-button class="circleButtom" size="mini" icon="el-icon-menu" circle
            @click="handleShowTransfer"></el-button>
        </el-tooltip>
      </div>
    </div>
    <div class="table-box">
      <TableCom ref="tableCom" :tableHead="tableHead" :tableData="tableData" :tableOperate="tableOperate"
        :delList.sync="delList">
      </TableCom>
    </div>
    <div class="page-box">
      <PageCom :page="pageData.current" :size="pageData.size" :total="total" @handleSize="handleSize"
        @handleCurrent="handleCurrent"></PageCom>
    </div>
    <!-- 新增弹框 -->
    <AddPopu ref="addPopu" :showDialog.sync="showAddDialog" @handleRefresh="getList" @handleUpdate="handleUpdate">
    </AddPopu>
    <!-- 显隐列 -->
    <TransferCom :showDialog.sync="showTransferDialog" :list.sync="tableHead"></TransferCom>

    <Supplemental :showDialog.sync="SupplementalDialog" />
    <ClearBox ref="ClearBox" :showDialog.sync="showClearDialog" @handleRefresh="getList"
      @handlegetCarNumber="getCarNumber"></ClearBox>
    <!-- 补单申请 -->
    <ApplyPopu ref="ApplyPopu" :showDialog.sync="showApplyDialog" @handleRefresh="handleRefresh"></ApplyPopu>
    <!-- 补单填报 -->
    <ReportPopu ref="ReportPopu" :showDialog.sync="showReportPopu" @handleAdd="Bd" @handleEdit="handleApply">
    </ReportPopu>
    <InfoViewBox ref="InfoBoxPopu" :showDialog.sync="showInfoDialog"></InfoViewBox>
  </div>
</template>

<script>
import { getSaleCartList, getgetById, deleteApi, getCarLicense, downloadApi } from '@/api/table'
import { selectApi, cropinfoSelectApi } from '@/api/select'
import { fileExport } from '@/utils/methods'
import TableCom from '@/components/TableCom'
import PageCom from '@/components/PageCom'
import AddPopu from './AddPopu.vue'
import InfoViewBox from './InfoViewBox.vue'
// import Cookies from 'js-cookie'
import ClearBox from './ClearBox'
import TransferCom from '@/components/TransferCom'
import Supplemental from '@/components/Supplemental'
import ApplyPopu from '@/views/inStorage/dialog/ApplyDialog.vue'
import ReportPopu from '@/views/inStorage/dialog/ReportDialog.vue'
import { mapGetters } from 'vuex';
export default {
  components: {
    TableCom,
    PageCom,
    AddPopu,
    TransferCom,
    Supplemental,
    ClearBox,
    ApplyPopu,
    ReportPopu,
    InfoViewBox
  },
  data() {
    return {
      form: {
        clientName: '',
        contractNumber: '',
        status: '',
        cropType: '',
        saleId: sessionStorage.getItem("tableInfoViewId") || ""
      },
      cropTypeList: [],
      pageData: {
        current: 1,
        size: 10
      },
      SupplementalDialog: false,
      showClearDialog: false,
      showApplyDialog: false,
      showReportPopu: false,
      total: 0,
      Butstatus: "1",
      showInfoDialog: false,
      tableHead: [{
        title: '流水号',
        prop: 'serialNum'
      }, {
        title: '状态',
        prop: 'status'
      }, {
        title: '车牌号',
        prop: 'carNumber'
      }, {
        title: '种类',
        prop: 'type'
      }, {
        title: '品种',
        prop: 'variety'
      }, {
        title: '类别',
        prop: 'category'
      }, {
        title: '含水量(%)',
        prop: 'waterContent'
      }, {
        title: '含油量(%)',
        prop: 'oilContent'
      }, {
        title: '面筋值(%)',
        prop: 'glutenValue'
      }, {
        title: '出库仓库号',
        prop: 'warehouseCode'
      }, {
        title: '垛号',
        prop: 'stampCode'
      }, {
        title: '过毛时间',
        prop: 'totalWeighTime'
      }, {
        title: '毛重(kg)',
        prop: 'totalWeight'
      }, {
        title: '过皮时间',
        prop: 'tareWeighTime'
      }, {
        title: '皮重(kg)',
        prop: 'tareWeight'
      }, {
        title: '净重(kg)',
        prop: 'netWeight'
      }, {
        title: '袋重(kg)',
        prop: 'packageWeight'
      }, {
        title: '扣重(kg)',
        prop: 'deductWeight'
      }, {
        title: '实重(kg)',
        prop: 'actualWeight'
      }, {
        title: '司机姓名',
        prop: 'driverName'
      }, {
        title: '手机号',
        prop: 'phone'
      }],
      tableData: [],
      tableOperate: [{
        title: '修改',
        handle: (row) => {
          // this.$refs.addPopu.carList = this.carList
          this.$refs.addPopu.ruleForm = { ...row };
          this.$refs.addPopu.handleGetInfo()
          this.$refs.addPopu.handleChangeCropType(row.type)
          this.$refs.addPopu.getKehuList()
          this.showAddDialog = true
        },
        flag: (row) => {
          if (this.hasIdentifier("OutboundDetails.update")) {
            if (this.Butstatus == '1') {
              return false
            }
            return true
          }
        }
      },
      {
        title: '查看',
        handle: (row) => {
          this.$refs.InfoBoxPopu.ruleForm = { ...row }
          this.showInfoDialog = true
          // this.$router.push({path: '/tableInfoView',query:{ index:'1'}});
        },
        flag: (row) => {
          return true
        }
      }
      ],
      carList: [{
        label: "已完成",
        value: 1
      }, {
        label: "未完成",
        value: 0
      }],
      isDropdownVisible: false,
      timeList: [],
      showAddDialog: false,
      delList: [],
      showTransferDialog: false,
      cookiesObj: {},
      setTimeoutFun: null,
    }
  },
  computed: {
    ...mapGetters(['hasIdentifier']), // 映射 getters
  },
  methods: {
    // 补单申请
    handleApply(row) {
      if (row.id) {
        this.$refs.ApplyPopu.ruleForm.orderWhy = row.orderWhy
        this.$refs.ApplyPopu.ruleForm.id = row.id
        this.$refs.ApplyPopu.ruleForm.status = '1'
      }
      this.$refs.ApplyPopu.ruleForm.orderType = '3'
      this.showApplyDialog = true
    },
    handleRefresh() {
      this.$refs.ReportPopu.getList()
    },
    // 补单填报
    handleReport() {
      this.$refs.ReportPopu.orderType = '3'
      this.$refs.ReportPopu.getList()
      this.showReportPopu = true
    },
    ClearChange() {
      this.$refs.ClearBox.getKehuList()
      this.$refs.ClearBox.ruleForm = {
        ...this.cookiesObj,
        id: '',
        contractNumber: sessionStorage.getItem("tableInfoViewcName")
      }
      this.$refs.ClearBox.getCarNumber()
      this.$refs.ClearBox.getZl2()
      this.showClearDialog = true
    },
    SupplementalTableDialog() {
      this.SupplementalDialog = true;
    },
    // 显示隐藏下拉框
    toggleDropdown() {
      const arrow = document.getElementById('arrow');
      const search = document.getElementById('search-box');
      if (!this.isDropdownVisible) {
        arrow.classList.add('down');
        search.classList.add('search-box-height');
      } else {
        arrow.classList.remove('down');
        search.classList.remove('search-box-height');
      }
      this.isDropdownVisible = !this.isDropdownVisible;
    },
    // 获取下拉框
    async handleGetSelect() {
      // let res = await selectApi({ type: 'car_type' })
      cropinfoSelectApi().then((aa) => {
        this.cropTypeList = aa.data
      })
      // this.carList = res.data.dictItemList
    },
    // 搜索框时间
    handleFormData() {
      if (this.timeList.length) {
        this.form.startTime = this.timeList[0]
        this.form.endTime = this.timeList[1]
      } else {
        this.form.startTime = ''
        this.form.endTime = ''
      }
    },
    // 全选取消全选
    handleSelectAll() {
      this.$refs.tableCom.toggleSelection(this.tableData)
    },
    // 重置
    handleReset() {
      this.form = {
        clientName: '',
        contractNumber: '',
        status: '',
        cropType: '',
      }
      this.timeList = []
    },
    // 获取表格
    async getList() {
      getgetById(sessionStorage.getItem("tableInfoViewId")).then((res) => {
        this.cookiesObj = res.data;
        this.Butstatus = res.data.status
      })
      let params = {
        ...this.form,
        // size: this.pageData.size,
        // current: this.pageData.current,
        saleId: sessionStorage.getItem("tableInfoViewId")
      }
      const { data } = await getSaleCartList(this.pageData, params)
      this.total = data.total
      this.tableData = data.records.map((item, index) => {
        return {
          ...item,
          status: this.carList.filter((e) => { return e.value == item.status })[0].label

        }
      })


    },
    // 更新补单状态
    handleUpdate() {
      this.$refs.ReportPopu.handleUpdate()
    },
    getCarNumber() {
      this.setTimeoutFun = setTimeout(() => {
        getCarLicense({farmCode:this.$farmCode,teamCode:this.$teamCode?this.$teamCode:''}).then((res) => {
          // this.ruleForm.carName=res.data.data
          if (res.data.data !== '') {
            this.ClearChange()
          } else {
            this.getCarNumber()
          }
        })
      }, 2000)
    },
    getCarNumberRightAway() {
      getCarLicense({farmCode:this.$farmCode,teamCode:this.$teamCode?this.$teamCode:''}).then((res) => {
        // this.ruleForm.carName=res.data.data
        if (res.data.data !== '') {
          this.ClearChange()
        } else {
          this.getCarNumber()

        }
      })
    },
    // 分页
    handleSize(size) {
      this.pageData.current = 1
      this.pageData.size = size
      this.getList()
    },
    handleCurrent(current) {
      this.pageData.current = current
      this.getList()
    },
    Bd() {
      this.$refs.addPopu.handleGetInfo()
      this.$refs.addPopu.ruleForm = {
        ...this.cookiesObj,
        id: '',
        contractNumber: sessionStorage.getItem("tableInfoViewcName")
      }
      this.$refs.addPopu.getKehuList()
      this.showAddDialog = true
    },
    // 删除
    async handleDel() {
      await deleteApi(this.delList)
      this.getList()
    },
    // 导出
    async handleExport() {
      let res = await downloadApi(this.form)
      fileExport(res, '销售填报详情')
    },
    // 显隐列弹框
    handleShowTransfer() {
      this.showTransferDialog = true
    },
  },
  mounted() {
    this.handleGetSelect()
    this.getList()
    this.getCarNumberRightAway()
  },
  beforeDestroy() {
    clearTimeout(this.setTimeoutFun)
    this.setTimeoutFun = null
  }
}
</script>

<style lang='scss' scoped>
.el-page {
  width: 100%;
  height: calc(100vh - 70px);

  .search-box {
    height: 40px;
    transition: height 0.3s ease;
    overflow: hidden;

    .search-card {
      width: 90%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      position: relative;

      .arrow {
        cursor: pointer;
        display: inline-block;
        position: absolute;
        right: -100px;
        font-size: 30px;
        transition: transform 0.3s ease;
      }

      .arrow.down {
        transform: rotate(90deg);
      }
    }

    .input-box {
      display: flex;
      align-items: center;
      margin-bottom: 15px;
      transition: height 0.2s ease-in-out;
    }
  }

  .search-box-height {
    height: 90px;
  }

  .operate-box {
    width: 100%;
    background-color: #f5f7fa;
    padding: 8px 5px;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

}

.titleInfo {
  width: 100%;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;

}
</style>
